import React, { Component } from 'react'
import { StyleSheet, View, Image, Text, ScrollView, Dimensions } from 'react-native'
import { connect } from 'react-redux'
import { Steps, List, DatePicker, Picker, WhiteSpace, TextareaItem, WingBlank, Toast, Button } from 'antd-mobile'
import Swiper from 'react-native-swiper'
import uuid from 'uuid'
import _ from 'lodash'
import { createForm } from 'rc-form'
import { Touchable, ImagePickers } from '../components'
import FirstStep from './upLoad/firstStep'

import { NavigationActions } from '../utils'

const { width, height } = Dimensions.get('window')
const { Step } = Steps;
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);


const styles = StyleSheet.create({
  slide1: {
    flex: 1
  },
  slide2: {
    flex: 1,
    paddingTop: 20
  },
  slide3: {
    flex: 1,
    marginTop: 20
  },
  buttonText: {
    width: 60,
    height: 30,
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: 'lightgrey',
    borderRadius: 5,
    textAlign: 'center',
    lineHeight: 30,
    marginTop: 100
  },
  pictureTitle: {
    color: '#000',
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 10
  },
  submitButton: {
    marginLeft: 20,
    marginRight: 20,
    marginTop: 130
  }
})

const steps = [{
  title: 'Finished',
  description: '旅游景点'
}, {
  title: 'In Progress',
  description: '景点图片'
}, {
  title: 'Waiting',
  description: '感想'
}].map((s, i) => <Step key={uuid()} description={s.description} />);


@connect(({ upload }) => ({ upload }))
class Upload extends Component {
  state = {
    step: 0,
    files: []
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.upload.uploading) {
      const { dispatch } = this.props
      dispatch({ type: 'app/loadNewTimeList' })
    }
  }

  changeIndex = (index) => {
    this.setState({
      step: index
    })
  }
  changeFile = (value) => {
    this.setState({
      files: value
    });
  }

  submit = () => {
    const { firstStep, secondStep, thirdStep } = this.props.upload
    const { dispatch, form } = this.props
    const { getFieldValue } = form
    const {
      travelType,
      startTime,
      endTime,
      attraction,
      area
    } = firstStep
    const { files } = this.state
    const comments = getFieldValue('comments')
    if (_.isNil(travelType) ||
        _.isNil(startTime) ||
        _.isNil(endTime) ||
        _.isNil(attraction) ||
        _.isNil(area)) {
      Toast.fail('旅游信息信息输入不完整！！！', 1)
    } else if (_.isNil(files)) {
      Toast.fail('没有上传对应的图片', 1)
    } else if (_.isNil('comments')) {
      Toast.fail('请输入你的日志内容', 1)
    }
    this.setState({
      step: 0,
      files: []
    })
    changeIndex(0)
    return dispatch({
      type: 'upload/submit',
      payload: {
        files,
        comments
      }
    })
  }

  render() {
    const { files } = this.state
    const { form } = this.props
    const { getFieldProps } = form
    return (
      <View>
        <View style={{
          height: 40,
          marginLeft: 40,
          marginTop: 20
        }}
        >
          <Steps
            current={this.state.step}
            direction="horizontal"
            size="small"
          >{steps}
          </Steps>
        </View>
        <View style={{ height }}>
          <Swiper
            style={styles.wrapper}
            horizontal={true}
            showsButtons={true}
            animated={true}
            loop={false}
            index={this.state.step}
            onIndexChanged={index => this.changeIndex(index)}
            nextButton={<Text style={styles.buttonText}>下一步</Text>}//eslint-disable-line
            prevButton={<Text style={styles.buttonText}>上一步</Text>}//eslint-disable-line
          >
            <View style={styles.slide1}>
              <FirstStep {...this.props} />
            </View>
            <View style={styles.slide2}>
              <Text style={styles.pictureTitle}>请选择你想上传的照片：</Text>
              <ImagePickers addChange={source => this.changeFile(source)} />
            </View>
            <View style={styles.slide3}>
              <TextareaItem
                {...getFieldProps('comments', {
                initialValue: ''
              })}
                placeholder="旅游日志"
                rows={10}
                count={100}
              />
              <Button loading={false} type="primary" style={styles.submitButton} onClick={() => this.submit()}>上传</Button>
            </View>
          </Swiper>
        </View>
      </View>
    )
  }
}

export default createForm()(Upload)
